import React, {Component} from 'react';
import {observer, inject} from 'mobx-react'
import {Card, Flex, Button, Result, WhiteSpace} from 'antd-mobile';
import dateUtils from '../../utils/DateUtils'


/**
 * 业主申请界面
 * */
@inject('propertyFeeStore')
@observer
class PropertyFee extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.propertyFeeStore.componentDidMount(this.props);
    }

    render() {
        const {propertyFeeInfo, paySubmit, isPay} = this.props.propertyFeeStore;
        return (
            <div style={{
                MozUserSelect: 'none',
                OUserSelect: 'none',
                KhtmlUserSelect: 'none',
                WebkitUserSelect: 'none',
                msUserSelect: 'none',
                userSelect: 'none'
            }}>
                {isPay === 0 && propertyFeeInfo ? <div>
                    <Card full>
                        <Card.Header
                            title="缴费明细"
                            thumb="/pages/mobile/property/fee/icon.jpg"
                            extra={<span>{dateUtils.getExpirationTime()}</span>}
                        />
                        <Card.Body>
                            <Flex align="end">
                                <div style={{
                                    textAlign: 'right',
                                    width: '120px',
                                    marginRight: 10,
                                    fontWeight: 'bold',
                                    fontSize: '16px'
                                }}>房屋户型:
                                </div>
                                <div style={{fontSize: '14px'}}>{propertyFeeInfo.roomTypeName}</div>
                            </Flex>
                            <WhiteSpace size="lg"/>
                            <Flex align="end">
                                <div style={{
                                    textAlign: 'right',
                                    width: '120px',
                                    marginRight: 10,
                                    fontWeight: 'bold',
                                    fontSize: '16px'
                                }}>建筑面积:
                                </div>
                                <div style={{fontSize: '15px'}}>{propertyFeeInfo.floorArea}</div>
                            </Flex>
                            <WhiteSpace size="lg"/>
                            <Flex align="end">
                                <div style={{
                                    textAlign: 'right',
                                    width: '120px',
                                    marginRight: 10,
                                    fontWeight: 'bold',
                                    fontSize: '16px'
                                }}>缴费金额:
                                </div>
                                <div style={{fontSize: '15px'}}>{propertyFeeInfo.fee}</div>
                            </Flex>
                            <WhiteSpace size="lg"/>
                            <Flex align="end">
                                <div style={{
                                    textAlign: 'right',
                                    width: '120px',
                                    marginRight: 10,
                                    fontWeight: 'bold',
                                    fontSize: '16px'
                                }}>未缴费月数:
                                </div>
                                <div style={{fontSize: '15px'}}>{propertyFeeInfo.months}</div>
                            </Flex>
                            <WhiteSpace size="lg"/>
                            <Flex align="end">
                                <div style={{
                                    textAlign: 'right',
                                    width: '120px',
                                    marginRight: 10,
                                    fontWeight: 'bold',
                                    fontSize: '16px'
                                }}>上次缴费账单日:
                                </div>
                                <div style={{fontSize: '15px'}}>{propertyFeeInfo.lastBillDate}</div>
                            </Flex>
                            <WhiteSpace size="lg"/>
                            <Flex align="end">
                                <div style={{
                                    textAlign: 'right',
                                    width: '120px',
                                    marginRight: 10,
                                    fontWeight: 'bold',
                                    fontSize: '16px'
                                }}>本次缴费账单日:
                                </div>
                                <div style={{fontSize: '15px'}}>{propertyFeeInfo.currentBillDate}</div>
                            </Flex>
                        </Card.Body>
                    </Card>
                    <div style={{
                        width: '100%',
                        position: 'fixed',
                        bottom: 0
                    }}>
                        <Button className="am-button-submit" onClick={() => paySubmit(this.props)}>去交费</Button>
                    </div>
                </div> : isPay === 1 || propertyFeeInfo? <div className="result-example">
                    <Result
                        img={<img src="https://gw.alipayobjects.com/zos/rmsportal/GIyMDJnuqmcqPLpHCSkj.svg"
                                  className="spe am-icon am-icon-md" alt=""/>}
                        title="没有需要支付的物业账单"
                        message="你没有需要支付的物业账单，如有疑问请到物业管理处咨询！"
                    />
                </div> : ''}

                <style>
                    {
                        `.am-button-submit {
                                color: #fff;
                                background-color: #5DB75D;
                                border-radius: 0px;
                            }
                            html:not([data-scale]) .am-button::before {
                                border: none;
                            }
                            .am-stepper-input {
                                ime-mode: disabled;
                            }

                            .result-example .spe {
                              width: 60px;
                              height: 60px;
                            }
                            .sub-title {
                              color: #888;
                              font-size: 14px;
                              padding: 30px 0 18px 0;
                              margin-left: 15px;
                            }
                        `
                    }
                </style>
            </div>
        );
    }
}

export default PropertyFee;